<template>
  <div>
    <div class="edit_box">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="题干" prop="title">
            <editor v-model="form.title" :min-height="140"/>
          </el-form-item>
          <el-form-item label="允许提交附件" prop="attachment">
            <el-select v-model="data.attachment" placeholder="允许学生提交附件" size="small">
              <el-option
                v-for="dict in dict.type.sys_bool_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="答案">
            <editor v-model="data.answer" :min-height="140"/>
          </el-form-item>
          <el-form-item label="分数" prop="score">
            <el-input v-model="form.score" placeholder="请输入分数" />
          </el-form-item>
          <el-form-item label="解析" prop="analysis">
            <editor v-model="form.analysis" :min-height="140"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </div>
      </div>
  </div>
</template>

<script>

export default {
  name: "Answer",
  dicts: ['sys_bool_status'],
  props: {
    form: {
      type: Object,
      default: function(){
        return {
          id: undefined,
          courseId: undefined,
          title: undefined,
          type: '3',
          content: undefined,
          score: undefined,
          analysis: undefined
        }
      }
    }
  },
  data() {
    return {
      data: {
        attachment: '0',
        answer: undefined
      },
      rules: {
        title: [
          { required: true, message: "题干不能为空", trigger: "blur" }
        ],
        score: [
          { required: true, message: "分数不能为空", trigger: "blur" },
          { type: 'number', message: '分数必须为数字值'}
        ]
      }
    };
  },
  computed: {
  },
  watch: {
    form: {
      handler(val) {
        if(this.form.content){
          this.data = JSON.parse(this.form.content)
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
  },
  beforeDestroy() {
    
  },
  methods: {
    handleAddRow(){
      this.data.answer.push({
        index: this.data.answer[this.data.answer.length - 1].index + 1,
        value: undefined,
        right: false
      });
    },
    handleDeleteRow(index){
      this.data.answer.splice(index, 1);
      for(let i = 0; i < this.data.answer.length; i++){
        this.data.answer[i].index = i + 1;
      }
    },
    handleSubmit(){
      this.form.content = JSON.stringify(this.data);
      console.log(this.form)
      this.$emit("submit", this.form);
    },
    handleCancel(){
      this.$emit("cancel", {});
    }
  },
};
</script>

<style lang="scss" scoped>
  .dialog-footer{
    text-align: center;
  }
  .edit_box{
    height: 600px;
    overflow: auto;
  }
</style>
